<template>
  <div class="text-editor" v-if="isVisible">
    <div class="text-editor-header">
      <h4>编辑文本</h4>
      <button class="close-btn" @click="close">×</button>
    </div>
    <!-- Quill富文本编辑器（成员C完善） -->
    <quill-editor 
      v-model:content="editorContent" 
      :options="editorOptions"
    />
    <div class="text-editor-footer">
      <Button @click="save">保存</Button>
      <Button @click="close" style="background-color: #666;">取消</Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import 'quill/dist/quill.snow.css' // Quill默认样式
import { useElementStore } from '@/store'
import { ElementType } from '@/types'
import Button from '../Toolbar/Common/Button.vue'

const elementStore = useElementStore()
const isVisible = ref(false) // 弹窗是否显示
const currentElementId = ref('') // 当前编辑的文本元素ID
const editorContent = ref('') // 编辑器内容
const editorOptions = ref({
  // Quill配置：仅保留核心格式
  modules: {
    toolbar: [
      [{ 'font': [] }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'color': [] }, { 'background': [] }]
    ]
  },
  theme: 'snow'
})

// 打开编辑器（后续成员D添加双击文本元素触发逻辑）
const openTextEditor = (elementId: string) => {
  const element = elementStore.elements.find(el => el.id === elementId && el.type === ElementType.TEXT)
  if (!element) return
  currentElementId.value = elementId
  // 将Delta格式转为编辑器内容（后续成员C完善）
  editorContent.value = '请编辑文本'
  isVisible.value = true
}

// 关闭编辑器
const close = () => {
  isVisible.value = false
  currentElementId.value = ''
  editorContent.value = ''
}

// 保存编辑内容（后续成员C完善）
const save = () => {
  if (!currentElementId.value) return
  // 将编辑器内容转为Delta格式，更新元素
  elementStore.updateElement(currentElementId.value, {
    delta: { ops: [{ insert: editorContent.value }] }
  })
  close()
}

// 通过defineExpose暴露函数
defineExpose({
  openTextEditor
})
</script>

<style scoped>
.text-editor {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.text-editor-header {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-editor-header h4 {
  margin: 0;
  font-size: 16px;
}

.close-btn {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.text-editor-footer {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Quill编辑器高度 */
.ql-container {
  min-height: 150px !important;
}
</style>